<template>
 <div>
   <div v-if="visible">
     <div style="margin-left: 20px ;margin-top: 20px">
       <el-empty description="没有商铺信息">
         <el-button @click="visibleChange">添加商铺</el-button>
       </el-empty>
     </div>
   </div>

   <div v-if="formVisible">
     <el-tabs v-model="activeName">
       <el-tab-pane label="第一步：完善商铺信息" name="addStore">
         <div style="width: 60%;margin: 0 auto">
           <el-row :gutter="15">
             <el-form ref="elForm" :model="storeData" :rules="rules" size="medium" label-width="100px">
               <el-col :span="12">
                 <el-form-item label="商铺名称" prop="storeName">
                   <el-input v-model="storeData.storeName" placeholder="请输入商铺名称" clearable :style="{width: '100%'}">
                   </el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="店铺门头照" required>
                   <el-upload
                     class="upload-demo"
                     action="string"
                     :http-request="uploadstorePic"
                     :on-remove="handleRemovestorePic">
                     <el-button size="small" type="primary">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">
                       <img v-if="hidden" :src=storeData.storePic  style="width: 180px;height: 80px">
                     </div>
                   </el-upload>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="营业执照号" prop="businessLicenseNo">
                   <el-input v-model="storeData.businessLicenseNo" placeholder="请输入营业执照号" clearable
                             :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="营业执照图" required>
                   <el-upload
                     class="upload-demo"
                     action="string"
                     :http-request="uploadbusinessLicensePic"
                     :on-remove="handleRemovebusinessLicensePic">
                     <el-button size="small" type="primary">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">
                       <img v-if="hidden" :src=formData.picA  style="width: 180px;height: 80px">
                     </div>
                   </el-upload>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="负责人" prop="hostName">
                   <el-input v-model="storeData.hostName" placeholder="请输入负责人" clearable :style="{width: '100%'}">
                   </el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="16">
                 <el-form-item label="身份证ID" prop="idCard">
                   <el-input v-model="storeData.idCard" placeholder="请输入身份证ID" :maxlength="18" show-word-limit clearable
                             :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="办公电话" prop="officePhone">
                   <el-input v-model="storeData.officePhone" placeholder="请输入办公电话" show-word-limit clearable
                             :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="身份证正面" required>
                   <el-upload
                     class="upload-demo"
                     action="string"
                     :http-request="uploadidCardFront"
                     :on-remove="handleRemoveidCardFront">
                     <el-button size="small" type="primary">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">
                       <!--<img v-if="hidden" :src=formData.picA  style="width: 180px;height: 80px">-->
                     </div>
                   </el-upload>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="背面照" required>
                   <el-upload
                     class="upload-demo"
                     action="string"
                     :http-request="uploadidCardBack"
                     :on-remove="handleRemoveidCardBack">
                     <el-button size="small" type="primary">点击上传</el-button>
                     <div slot="tip" class="el-upload__tip">
                       <!--<img v-if="hidden" :src=formData.picA  style="width: 180px;height: 80px">-->
                     </div>
                   </el-upload>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="商铺地址" prop="detailAddress">
                   <el-input v-model="storeData.detailAddress" type="textarea" placeholder="请输入商铺地址"
                             :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item label="商铺描述" prop="description">
                   <el-input v-model="storeData.description" type="textarea" placeholder="请输入商铺描述"
                             :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="紧急联系人" prop="impContactName">
                   <el-input v-model="storeData.impContactName" placeholder="请输入紧急联系人" clearable
                             :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="联系人电话" prop="impContactPhone">
                   <el-input v-model="storeData.impContactPhone" placeholder="请输入联系人电话" clearable
                             :style="{width: '100%'}"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="联系人关系" prop="impContactRelative">
                   <el-select v-model="storeData.impContactRelative" placeholder="请选择与联系人联系人关系" clearable
                              :style="{width: '100%'}">
                     <el-option v-for="(item, index) in impContactRelativeOptions" :key="index" :label="item.label"
                                :value="item.value" :disabled="item.disabled"></el-option>
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
                 <el-form-item size="large">
                   <el-button type="primary" @click="submitForm">提交</el-button>
                   <el-button @click="resetForm">重置</el-button>
                 </el-form-item>
               </el-col>
             </el-form>
           </el-row>
         </div>
       </el-tab-pane>
       <el-tab-pane label="已提交表单？查看审核状态" name="addStoreStatu" v-if="storeStatus.storeUserId">
        <div>
          <el-card class="box-cards">
            <div slot="header" class="clearfix">
              <span>我的商铺信息</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="updateStore(true)">修改</el-button>
            </div>
            <div>
              <div class="img-container">
                <div cLass="userinfo-container">
                  <el-descriptions :column="4" title="图片信息" border style="margin-bottom: 5px">
                    <el-descriptions-item label="商铺门头照"><img :src="storeStatus.storePic" class="avatar_imgs" ></el-descriptions-item>
                    <el-descriptions-item label="营业执照照片"><img :src="storeStatus.businessLicensePic" class="avatar_imgs" ></el-descriptions-item>
                    <el-descriptions-item label="身份证正面照"><img :src="storeStatus.idCardFront" class="avatar_imgs" ></el-descriptions-item>
                    <el-descriptions-item label="身份证背面照"><img :src="storeStatus.idCardFront" class="avatar_imgs" ></el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions :column="3" title="材料信息" border style="margin-bottom: 5px">
                    <el-descriptions-item label="用户id">{{storeStatus.storeUserId}}</el-descriptions-item>
                    <el-descriptions-item label="负责人">{{storeStatus.hostName}}</el-descriptions-item>
                    <el-descriptions-item label="办公电话">{{storeStatus.officePhone}}</el-descriptions-item>
                    <el-descriptions-item label="身份证ID">{{storeStatus.idCard}}</el-descriptions-item>
                    <el-descriptions-item label="商铺名称">{{storeStatus.storeName}}</el-descriptions-item>
                    <el-descriptions-item label="商铺地址">{{storeStatus.detailAddress}}</el-descriptions-item>
                    <el-descriptions-item label="营业执照号">{{storeStatus.businessLicenseNo}}</el-descriptions-item>
                    <el-descriptions-item label="紧急联系人姓名">{{storeStatus.impContactName}}</el-descriptions-item>
                    <el-descriptions-item label="紧急联系人电话">{{storeStatus.impContactPhone}}</el-descriptions-item>
                    <el-descriptions-item label="紧急联系人关系">{{storeStatus.impContactRelative}}</el-descriptions-item>
                    <el-descriptions-item label="提交时间">{{storeStatus.createTime}}</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions :column="1" title="审核状态" border>
                    <el-descriptions-item label="审核状态">
                      <el-tag size="small" :type="storeStatus.status==2?'danger':storeStatus.status==1?'success':''">{{storeStatus.status===0?'未审核，请等待':storeStatus.status===1?'审核通过':'审核不通过'}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="驳回原因" v-if="storeStatus.status===2">{{storeStatus.rejectReason}}</el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </div>
          </el-card>
        </div>
       </el-tab-pane>
       <el-tab-pane label="第二步：提交押金" name="payPrice">
         <div v-if="storeStatus.status===0" style="margin-left: 20px ;margin-top: 20px">
           <el-empty  :description="storeStatus.status===0?'商铺信息还未审核通过，请等待！':'您还未添加商铺！'">
           </el-empty>
         </div>
         <div v-if="storeStatus.status===1">
           <div class="common">
             <div class="content">
               <!--全部商品图片展示-->
               <div class="contentImg">
                 <div class="title">
                   <h2>收银台</h2>
                   <div>
                   </div>
                 </div>
                 <div>
                   <div slot="content">
                     <div class="box-inner order-info">
                       <p class="payment-detail">扫一扫付款（元）</p>
                       <p class="payment-money">1000元</p>
                       <div class="num">
                         <el-button type="text" @click="finishPay">确认支付状态</el-button>
                       </div>
                       <div class="img-box">
                         <img id="qr" class="pic"  src="../../assets/img/pay.jpg" alt="加载失败" width="168px" height="168px"/>
                         <div class="explain">
                           <img class="fn-left" src="https://t.alipayobjects.com/images/T1bdtfXfdiXXXXXXXX.png" alt="扫一扫标识">
                           <div class="fn-right">打开手机支付宝<br>扫一扫继续付款</div>
                         </div>
                       </div>
                       <a class="download-alipay" href="https://mobile.alipay.com/index.htm" target="_blank">首次使用请下载手机支付宝</a>

                       <div class="qrguide-area">
                         <img src="https://t.alipayobjects.com/images/rmsweb/T13CpgXf8mXXXXXXXX.png" :class="show?'show-img':'close-img'" @click="changePic()">
                         <img src="https://t.alipayobjects.com/images/rmsweb/T1ASFgXdtnXXXXXXXX.png" :class="show?'close-img':'show-img'" @click="changePic()">
                       </div>

                       <img src="../../assets/img/red.png" width="50px" height="50px" class="red" title="支付领红包" @click="showRed()">
                     </div>

                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </el-tab-pane>
     </el-tabs>
   </div>

   <div v-if="endVisible">
     <div>
       <div style="width: 30%;float: left">
         <el-card shadow="never">
           <div>
             <div>
               <div style="width: 100%">
                 <el-descriptions :column="1" title="我的店铺:" style="margin-bottom: 5px">
                   <el-descriptions-item label="商铺门头照"><img :src="storeStatus.storePic" class="avatar_imgs" ></el-descriptions-item>
                   <el-descriptions-item label="营业执照照片"><img :src="storeStatus.businessLicensePic" class="avatar_imgs" ></el-descriptions-item>
                 </el-descriptions>
                 <el-divider></el-divider>
                 <el-descriptions :column="1"  style="margin-bottom: 5px">
                   <el-descriptions-item label="负责人">{{storeStatus.hostName}}</el-descriptions-item>
                   <el-descriptions-item label="办公电话">{{storeStatus.officePhone}}</el-descriptions-item>
                   <el-descriptions-item label="身份证ID">{{storeStatus.idCard}}</el-descriptions-item>
                   <el-descriptions-item label="商铺名称">{{storeStatus.storeName}}</el-descriptions-item>
                   <el-descriptions-item label="商铺地址">{{storeStatus.detailAddress}}</el-descriptions-item>
                   <el-descriptions-item label="营业执照号">{{storeStatus.businessLicenseNo}}</el-descriptions-item>
                   <el-descriptions-item label="创建时间">{{storeStatus.createTime}}</el-descriptions-item>
                 </el-descriptions>
                 <el-descriptions :column="1" title="审核状态">
                   <el-descriptions-item label="审核状态">
                     <el-tag size="small" :type="storeStatus.status==2?'danger':storeStatus.status==1?'success':''">{{storeStatus.status===0?'未审核，请等待':storeStatus.status===1?'审核通过':'审核不通过'}}</el-tag>
                   </el-descriptions-item>
                   <el-descriptions-item label="驳回原因" v-if="storeStatus.status===2">{{storeStatus.rejectReason}}</el-descriptions-item>
                 </el-descriptions>
               </div>
             </div>
           </div>
           <div>
             <el-button style="float: right;margin: 5px" size="small" plain>修改</el-button>
           </div>
         </el-card>
       </div>
       <div style="width: 66%;float: right;background-color: #f3f3f3">
         <el-divider content-position="left">已发布商品</el-divider>
         <el-card :body-style="{ padding: '0px' }" v-for="(good,index) in goodList" shadow="hover" style="width: 15%;margin-top: 10px;margin-bottom:10px;margin-left:10px;float: left">
           <img :src="good.imgurl" @click="toDetail(good,index)" style="width: 100%;height: 125px">
         </el-card>
       </div>
     </div>

   </div>
   <el-dialog
     title="支付红包"
     :visible.sync="dialogVisible"
     width="40%"
     style="text-align:center;width:50%;margin:0 auto">
     <img src="../../assets/img/redpay.jpg" class="qr-red"/>
     <span>支付前领个红包吧(每日可领一次)</span>
     <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="alwaysTake">领取了</el-button>
      </span>
   </el-dialog>
 </div>
</template>

<script>
  export default {
    name: 'GoodStore',
    data() {
      return {
        goodList:[],
        isEdit:undefined,
        storeStatus:{},
        user:JSON.parse(window.sessionStorage.getItem('user')),
        hidden:false,
        activeName:'addStore',
        visible:false,
        formVisible:false,
        dialogVisible: false,
        endVisible:false,
        show: true,
        storeData: {
          description:undefined,
          storeUserId:undefined,
          storeName: undefined,
          storePic: null,
          businessLicenseNo: undefined,
          businessLicensePic: null,
          officePhone: undefined,
          detailAddress: undefined,
          hostName: undefined,
          idCard: undefined,
          idCardFront: null,
          idCardBack: null,
          impContactName: undefined,
          impContactRelative: undefined,
          impContactPhone: undefined,
          status:undefined,
        },
        store:{
          storeId:undefined,
          cashStatus:1,
          cashSecurity:1000,
        },
        // 每页显示的条数
        size: 50,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        rules: {
          storeName: [{
            required: true,
            message: '请输入商铺名称',
            trigger: 'blur'
          }],
          businessLicenseNo: [{
            required: true,
            message: '请输入营业执照号',
            trigger: 'blur'
          }],
          officePhone: [{
            required: true,
            message: '请输入办公电话',
            trigger: 'blur'
          }],
          detailAddress: [{
            required: true,
            message: '请输入商铺地址',
            trigger: 'blur'
          }],
          description: [{
            required: true,
            message: '请输入商铺描述',
            trigger: 'blur'
          }],
          hostName: [{
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }],
          idCard: [{
            required: true,
            message: '请输入身份证ID',
            trigger: 'blur'
          }],
          impContactName: [{
            required: true,
            message: '请输入紧急联系人',
            trigger: 'blur'
          }],
          impContactRelative: [{
            required: true,
            message: '请选择关系',
            trigger: 'change'
          }],
          impContactPhone: [{
            required: true,
            message: '请输入联系人电话',
            trigger: 'blur'
          }],
        },
        impContactRelativeOptions: [{
          "label": "夫妻",
          "value": "夫妻"
        }, {
          "label": "父女",
          "value": "父女"
        }, {
          "label": "父子",
          "value": "父子"
        }, {
          "label": "母女",
          "value": "母女"
        }, {
          "label": "母子",
          "value": "母子"
        }, {
          "label": "姐妹",
          "value": "姐妹"
        }, {
          "label": "姐弟",
          "value": "姐弟"
        }, {
          "label": "兄弟",
          "value": "兄弟"
        }, {
          "label": "其它",
          "value": "其它"
        }],
      }
    },
    mounted(){
      this.initStoreStatus();
    },
    methods: {
      // 传递参数到detail页面
      toDetail(good,index) {
          this.$router.push({
            path: '/detail',
            name: 'Detail',
            params: {
              name: good.goodId,
            }
          })
      },
      // 确认支付
      finishPay(){
        this.$confirm('押金支付成功?', '支付提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.putRequest('/good/data/store',this.store).then(resp=>{
            this.$notify.success({ title: '成功', message: resp.message });
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      alwaysTake(){
        this.dialogVisible = false
      },
      showRed () {
        this.dialogVisible = true
      },
      changePic () {
        this.show = !this.show
      },
      showRed () {
        this.dialogVisible = true
      },
      // 点击修改事件
      updateStore(edit){
        this.isEdit=edit
        this.activeName='addStore'
        Object.assign(this.storeData,this.storeStatus);
        this.storeData.status=0
      },
      //显示弹出框赋值
      visibleChange(){
        this.visible=false
        this.formVisible=true
      },
      // 添加商铺
      submitForm() {
        this.storeData.storeUserId=this.user.userId
        if (this.isEdit){
          // 修改商铺
          this.putRequest('/good/data/store',this.storeData).then(resp => {
            if (resp) {
              this.$notify.success({ title: '成功', message: resp.message });
              this.activeName='addStoreStatu'
              this.initStoreStatus()
            }
          })
          this.isEdit=''
        } else{
          // 添加商铺
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            // TODO 提交表单
            this.postRequest('/good/data/store',this.storeData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
              }
            })
          })
          this.isEdit=''
        }

      },
      // 根据用户id查询商铺状态
      initStoreStatus() {
        this.getRequest('/good/data/oneStore/'+this.user.userId).then(resp => {
          if (resp) {
            if(resp.cashStatus){
              this.initGood()
              this.endVisible=true
              this.storeStatus=resp;
            }else {
              this.store.storeId=resp.storeId
              this.storeStatus=resp;
              this.formVisible=true
            }
          }else{
            this.visible=true
          }
        })
      },
      initGood(){
        // 根据用户id查询全部商品
        let url = '/good/data/page_rent/?userId='+this.user.userId+'&&uploadStatus='+1+'&&orderBy='+''+'&&current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.goodList = resp.records;
            this.total=resp.total;
          }
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },

      //上传图片
      uploadstorePic(item) {
        let formData = new FormData()
        formData.append('file', item.file)
          // this.hidden=false;
          this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
            if (resp) {
              this.storeData.storePic=resp.obj;
            }
          })
      },
      uploadbusinessLicensePic(item) {
        let formData = new FormData()
        formData.append('file', item.file)
        // this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            this.storeData.businessLicensePic=resp.obj;
          }
        })
      },
      uploadidCardFront(item) {
        let formData = new FormData()
        formData.append('file', item.file)
        // this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            this.storeData.idCardFront=resp.obj;
          }
        })
      },
      uploadidCardBack(item) {
        let formData = new FormData()
        formData.append('file', item.file)
        // this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            this.storeData.idCardBack=resp.obj;
          }
        })
      },
      //删除图片
      handleRemovestorePic() {
        let formData = new FormData()
        formData.append('file', this.storeData.storePic)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
      handleRemovebusinessLicensePic() {
        let formData = new FormData()
        formData.append('file', this.storeData.businessLicensePic)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
      handleRemoveidCardFront() {
        let formData = new FormData()
        formData.append('file', this.storeData.idCardFront)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
      handleRemoveidCardBack() {
        let formData = new FormData()
        formData.append('file', this.storeData.idCardBack)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped rel="stylesheet/scss">
  .box-cards{
    width: 80%;
    margin: 0 auto;
  }
  .avatar_imgs{
    width: 100px;
    height: 80px;
    margin-right: 20px;
  }
  .img-container{
    width: 100%;
    display: flex;
    margin-left: 10px;
  }
  .order-info {
    color: #333;
    background: #fff !important;
    h3 {
      padding-bottom: 14px;
      line-height: 36px;
      text-align: center;
      font-size: 36px;
      color: #212121;
    }
    .payment-detail {
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #999;
    }
  }

  .box-inner {
    line-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
    em {
      margin-left: 5px;
      font-size: 24px;
      color: #d44d44;
      font-weight: 700;
      margin-right: 20px;
      span {
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }

  .box-btn {
    line-height: 60px;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    > div {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 20px;
    }
    em {
      margin-left: 5px;
      font-size: 24px;
      color: #d44d44;
      font-weight: 700;
      margin-right: 20px;
      span {
        margin-right: 4px;
        font-size: 16px;
      }
    }
  }

  .payment-money {
    text-align: center;
    font-size: 30px;
    color: #d44d44;
    font-weight: 700;
  }

  .img-box{
    position: relative;
    width: 180px;
    height: auto;
    min-height: 168px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid #d3d3d3;
    box-shadow: 1px 1px 1px #ccc;
    display: inline-block;
  }

  .explain {
    margin: 5px 0 12px 0;
  }

  .pic{
    margin-top: 3px;
  }

  .fn-left{
    margin-left: -5px;
  }

  .fn-right{
    font-size: 13px;
    color: #4D4D4D;
    line-height: 18px;
    margin: -57px 0 0 33px;
  }

  .download-alipay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-top: -5px;
    font-size: 12px;
    color: #a6a6a6;
    text-decoration: underline;
    width: 25%;
    margin: 0 auto;
  }

  .qrguide-area {
    position: absolute;
    top: 90px;
    left: 740px;
    width: 204px;
    height: 183px;
    cursor: pointer;
  }

  .show-img{
    display: block;
  }

  .close-img{
    display: none;
  }

  .red {
    position: absolute;
    top: 382px;
    left: 1151px;
    width: 47px;
    height: 50px;
    cursor: pointer;
  }

  .el-dialog--small {
    width: 30%;
  }

  .qr-red {
    display: block;
    margin: 0 auto;
    width: 70%;
  }

  .count {
    display: flex;
    position: absolute;
    text-align: center;
    width: 230px;
    flex-direction: column;
    align-items: center;
    margin-left: calc(50% - 115px);
    margin-top: 0px;
    color: #222;
    margin-top: -18px;
  }
</style>
